<template>
  <div class="page">
    <!-- Form -->
    <Form
      ref="formRef"
      :form="form"
      :config="config"
      :name="name"
      search
      @search-form="searchForm"
    >
      <template #inputNumber="{ data }">
        <span>{{ data.text }}</span>
      </template>
    </Form>
    <!-- Table -->
    <TableButtons class="mb10" layout="add" @click="clickTableButtons" />
    <Table :columns="tableColumns" :data="table">
      <template #operation="{ scope: { row } }">
        <el-link
          type="primary"
          :underline="false"
          @click="clickEditeHandle(row)"
        >
          编辑
        </el-link>
        <el-link type="danger" :underline="false">删除</el-link>
      </template>
    </Table>
    <!-- Pagination -->
    <Pagination :pagination="pagination" />
  </div>
</template>

<script setup>
// components
import Form from '@/components/Form/Form.vue'
import TableButtons from '@/components/TableButtons/TableButtons.vue'
import Table from '@/components/Table/Table.vue'
import Pagination from '@/components/Pagination/Pagination.vue'
// hooks
import useForm from '@/hooks/useForm'
// others
import { ref } from 'vue'
import { formData, formConfig, tableColumns, tableData } from './config'
import router from '@/router'

/** Form */
const formRef = ref()
const { form, config, submitForm } = useForm({ formRef, formData, formConfig })
const searchForm = async () => {
  submitForm(() => {
    console.log(111)
  })
}
/** Table */
const table = ref(tableData)
const pagination = {
  total: 30,
  currentPage: 1,
  pageSize: 10,
  currentChange: () => {},
  sizeChange: () => {}
}
const clickEditeHandle = (data) => {
  console.log('122', data)
  router.push({ name: 'smsCustomerDetail', query: { id: data.id } })
}
/** TableBUttons */
const clickTableButtons = (item) => {
  console.log(item)
  if (item.name === 'add') {
    
  }
}
</script>

<style lang="less" scoped></style>
